<template>
  <div>
    <el-dialog  
        v-bind="$attrs" 
        v-on="$listeners"
        :visible="Visible"
        width="40%"
        custom-class="dialog"
        :modal-append-to-body='false'
        append-to-body
        @close="close" 
        :title="formListTitle"
        :destroy-on-close='true'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :center='true'
        >
        <el-form ref="roleManageForm" :model="formListData" :rules="rules" label-width="100px" v-if="permission" disabled>
           <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formListData.roleName" placeholder="请输入角色名称" clearable :style="{width: '95%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="角色权限" prop="rolePermission">
                <el-cascader v-model="formListData.rolePermission" :options="rolePermissionOptions"
                    :props="rolePermissionProps" :style="{width: '95%'}" placeholder="请选择角色权限" clearable>
                </el-cascader>
            </el-form-item>
           
             <el-form-item label="角色启用">
                <el-switch
                v-model="formListData.isEnable"
                active-color="#67C23A"
                inactive-color="#C0C4CC">
                </el-switch>
            </el-form-item>
        </el-form>

         <el-form ref="roleManageForm" :model="formListData" :rules="rules" label-width="100px" v-else>
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formListData.roleName" placeholder="请输入角色名称" clearable :style="{width: '95%'}">
                </el-input>
            </el-form-item>
            
            <el-form-item label="角色权限" prop="rolePermission" >
                <el-cascader v-model="formListData.rolePermission" :options="rolePermissionOptions"
                    :props="rolePermissionProps" :style="{width: '95%'}" placeholder="请选择角色权限" clearable>
                </el-cascader>
            </el-form-item>
          
            <el-form-item label="角色启用">
                <el-switch
                v-model="formListData.isEnable"
                active-color="#67C23A"
                inactive-color="#C0C4CC">
                </el-switch>
            </el-form-item>
        </el-form>
       
        <div slot="footer" v-if="!permission">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm" :loading="isloading">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    Visible:Boolean,
    editMark:Boolean,
    listData:Object,
    permission:Boolean
  },
  components: {

  },
  data() {
    return {
      title:'',
      inheritAttrs: false,
      isloading:false,
      formData: {
        roleName: '',
        rolePermission: [],
        isEnable:false
      },
      menuObj:{},
      menuPermission:[],
      rolePermissionProps: {
        multiple: true
      },
      rules: {
        roleName: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'change'
        }],
        rolePermission: [{
          required: true,
          type: 'array',
          message: '请选择角色权限',
          trigger: 'blur'
        }],
      },
      rolePermissionOptions: this.$config.meanPermissionOptions(),
    };
  },
  computed:{
      formListData(){
          if(this.editMark){
              this.formData.roleName = this.listData.roleName
              this.formData.rolePermission = this.listData.roleOriginPermission
              this.formData.isEnable = this.listData.isEnable
              return this.formData
          }
          return this.formData
      },
      formListTitle(){
          if(this.editMark){
              if(this.permission) return this.title = '查看'
              return this.title = '编辑'
          }
          return this.title = '新增'
      }
  },
  created() {
    
  },
  mounted() {
      console.log(this.listData);
       
  },
  beforeDestroy() {
    this.$off()
  },
  methods: {
    
    close() {
      this.$emit('close')
    },
    handelConfirm() {
        console.log(111);
      this.$refs['roleManageForm'].validate(valid => {
        if (valid &&!this.isloading){
          this.isloading=true
          console.log(11122);
          this.formData.rolePermission.forEach(item=>{
               
                if(this.menuObj[item[0]]){
                   this.menuObj[item[0]]['permission'][`${item[1]}`]=true
                }else{
                   this.menuObj[item[0]]={ permission:{}}
                   this.menuObj[item[0]]['permission'][`${item[1]}`]=true
                }

            })
            this.menuPermission.push(this.menuObj)
            this.editMark?this.saveRoleData(this.menuPermission,this.listData.objectId,true):this.saveRoleData(this.menuPermission,1,false)
           
        }else{
            this.$utils.message.warning(this,'请填写完整角色信息')
            return false;
        }
        
      })
    },
    saveRoleData(roledata,id,flag){
        console.log(flag);
        this.$http.saveRoleData(this,this.formData,id,roledata,flag).then(success=>{
            this.$emit('save')
            this.close()
            this.isloading=false
        }).catch(error=>{
            this.isloading=false
            
        })
    },
    
  },
};
</script>

<style scoped lang="scss">

/deep/.el-dialog {
      border-radius: 15px;
      z-index: 5;
      min-width: 820px;  
      margin-top: 5vh !important;
}

</style>



